<template>
  <!-- 哈弗训练营 头部 -->
  <div class="header">
    <div class="background">
      <img src="./../assets/image/hafu1.png" alt="" />
    </div>
    <van-icon @click="todolist" name="arrow-left" />
    <img class="img1" src="./../assets/image/hafu2.png" alt="" />
    <div class="h-main">
      <img src="./../assets/image/hafu1.png" alt="" />
      <div class="h-text">
        <p>哈弗训练营P1</p>
        <em>
          <van-icon name="exchange" />
          &nbsp;学习计划
        </em>
      </div>
    </div>
  </div>
  <!-- 内容 -->
  <div class="main">
    <!-- 已开课5节 -->
    <div class="nav">
      <span>已开课{{ cout }}节</span>
      <span>课程有效期：2013-07-01</span>
    </div>
    <ul class="nav-main">
      <li class="list" v-for="item in list" :key="item.code">
        <div class="nm-left">
          <div class="zhezhao"></div>
          <span class="a">{{ item.time }}</span>
          <img :src="item.data.src" alt="" />
        </div>

        <p>
          <i>{{ item.data.name }}</i>
          <span>{{ item.data.details }}</span>
          <em>{{ item.data.tution }}</em>
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import { getHaApi } from "../utils/api";
export default {
  setup() {
    const list = ref([]);
    const cout = ref();

    onMounted(async () => {
      const res = await getHaApi();

      if (res.status === 0) {
        list.value = res.results;
        cout.value = res.results.length;
      }
      // console.log("Component is mounted!");
    });

    return { cout, list };
  },
  methods: {
    todolist() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 200px;
  background: rgb(100, 68, 38);
  position: relative;

  .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 90%;
    filter: blur(20px);
    opacity: 20%;
    overflow: hidden;
  }
  > .van-icon {
    position: absolute;
    top: 17px;
    left: 5px;
    font-size: 18px;
    color: white;
  }
  > img {
    position: absolute;
    right: 20px;
    top: 17px;
  }
  .h-main {
    height: 120px;
    position: absolute;
    bottom: 10px;
    display: flex;
    img {
      height: 110px;
      width: 130px;
      border-radius: 28%;
    }
    .h-text {
      height: 100px;
      //background: rgb(76, 187, 231);
      padding-top: 13px;
      margin-left: 10px;
      p {
        font-size: 23px;
        font-weight: 400;
        color: white;
        padding-bottom: 30px;
      }
      em {
        display: inline-block;
        width: 130px;
        height: 40px;
        border-radius: 20px;
        background: rgba(0, 0, 0, 0.37);
        color: rgb(255, 255, 255);
        font-size: 16px;
        line-height: 40px;
        text-align: center;
      }
    }
  }
}
.main {
  width: 100%;
  height: 300px;
  //background: skyblue;
  .nav {
    display: flex;
    font-size: 15px;
    justify-content: space-between;
    padding: 10px;
    > span {
      padding: 9px 9px 0 9px;
      border-radius: 10px;
      background: #eae9e9;
    }
  }
  .nav-main {
    padding: 20px;
  }
  .list {
    padding: 13px 0;
    border-bottom: 1px solid rgb(233, 233, 233);
    display: flex;
    .nm-left {
      border-radius: 5px;
      overflow: hidden;
      height: 76px;
      width: 134px;
      position: relative;
      img {
        width: 134px;
        height: 76px;
      }
      .zhezhao {
        width: 100%;
        height: 20px;
        position: absolute;
        bottom: 0px;
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0.671), rgba(0, 0, 0, 0));
      }
      span {
        width: 100%;
        text-align: center;
        color: rgb(255, 255, 255);
        display: block;
        font-size: 2px;
        position: absolute;
        bottom: 1px;
        left: 0px;
      }
    }

    p {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 10px;
      i {
        font-size: 19px;
        font-weight: 600;
        width: 180px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      span {
        padding-bottom: 9px;
        font-size: 14px;
        color: rgb(192, 192, 192);
        font-weight: 500;
        width: 180px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      em {
        padding-bottom: 3px;
        font-size: 12px;
      }
    }
  }
  .list:hover .zhezhao {
    transition: all 0.1s;
    height: 30px;
  }
}
</style>
